<template>
  <div  class="container" ref="container">
        <ul>
          <li v-for="item in value" :key="item">
            {{item}}
          </li>
        </ul>
      <div class="more" ref="more">
            加载更多
      </div>
  </div>
</template>
<script>
export default {
  name: 'SeArch',
  data () {
    return {
      value: 10
    }
  },
  mounted () {
    const container = this.$refs.container
    const more = this.$refs.more
    const ob = new IntersectionObserver((entries) => {
      const entry = entries[0]
      // 数组中isIntersecting属性表示的是被观察的元素是进入还是离开元素
      if (entry.isIntersecting) {
        this.value += 10
      }
    }, {
      // 这个root配置表示的是  看观察的元素和哪个元素重合  如果不写，默认的就是整个浏览器的窗口视图
      root: container,
      // 这是threshold表示的是观察元素与root元素重叠多少  0-1之间取值，如果重叠了100%  就触发回调函数
      threshold: 1

    })
    // 这里表示需要观察的元素，这里需要观察的元素是more，看他是否出现在可视区域
    ob.observe(more)
  }
}
</script>
<style lang="less" scoped>
ul{
  list-style: none;
}
.container{
  height: 100px;
  background-color: pink;
  overflow: scroll;
}
</style>
